<template>
  <inject-template :item="item" :pageId="pageId" :popId="popId">
    <template v-slot:common>
      <ul class="wb-table">
        <li v-for="(item_, index) in getTableList" :key="index" :class="getItemClass">
          <span class="item-rank">{{ item_.rank }}</span>
          <span class="item-area">{{ item_.area }}</span>
          <span class="item-num">{{ item_.num }}</span>
        </li>
      </ul>
    </template>
  </inject-template>
</template>

<script>
import InjectTemplate from '@/components/inject-template.vue'
import { utils } from '@/components/utils/utils'

export default {
  name: 'WbTable',
  mixins: [utils],
  components: {
    InjectTemplate,
  },
  computed: {
    getItemClass(){
      let classes = [];
      classes.push(this.commonAttr.itemType);
      return classes;
    },
    getTableList(){
      if(this.isH5Edit){
        return []
      }
      let list = this.wbListOrLists;
      if(this.commonAttr.displayNum > 0){
        list = _.dropRight(this.wbListOrLists, list.length - this.commonAttr.displayNum);
      }
      return list;
    }
  },
  mounted(){
  },
  methods: {

  },
  beforeUnmount(){
  }
};
</script>

<style lang="scss">
.wb-table{
  width: inherit;
  height: inherit;
  overflow-y: scroll;

  /*debug ios 默认不显示滚动条 */
  -webkit-overflow-scrolling: auto !important;

  .area{
    font-weight: bold;
    color: #654585;
    font-size: var(--size-28);
    line-height: 2;

    span{
      display: inline-block;
      text-align: center;
    }
  }
  .item-rank {
    width: 16%;
  }
  .item-area {
    width: 40%;
  }
  .item-num {
    width: 30%;
  }
}
.wb-table::-webkit-scrollbar {
  width: var(--size-8);
} /* 这是针对缺省样式 (必须的) */
.wb-table::-webkit-scrollbar-track {
  padding: 0 var(--size-10);
  border-radius: var(--size-10);
  background-color: rgba(255, 255, 255, 0.2); 
  -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.8);
} /* 滚动条的滑轨背景颜色 */

.wb-table::-webkit-scrollbar-thumb {
  background: #5f337f;
  border-radius: var(--size-10);
}
</style>
